<template>
  <!-- 巡检装置 -->
  <div class="inspection-report-h bigTableStyle">
    <div class="inspection-report-index">
      <div class="fromed">
        <div class="inspection-report-return">
          <div>
            <span class="icon"></span> 巡检装置
          </div>
          <div class="top-back" v-to-router="'/jointInspection'"></div>
        </div>
        <el-form ref="elForm" :model="formData" size="medium" label-width="1.4rem">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item label="所属地市:" prop="time">
                <el-select
                  v-model="formData.cities"
                  placeholder="请选择所属地市"
                  clearable
                  :style="{ width: '100%' }"
                  filterable
                >
                  <el-option
                    v-for="(item, index) in citiesOptions"
                    :key="index"
                    :label="item.interval"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="变电站名称:" prop>
                <el-select
                  v-model="formData.substation"
                  placeholder="请选择下拉变电站"
                  clearable
                  :style="{ width: '100%' }"
                  filterable
                >
                  <el-option
                    v-for="(item, index) in substationOptions"
                    :key="index"
                    :label="item.interval"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="测点名称:" prop="source">
                <el-select
                  v-model="formData.sideShot"
                  placeholder="请选择测点名称"
                  clearable
                  :style="{ width: '100%' }"
                  filterable
                >
                  <el-option
                    v-for="(item, index) in sideShotOptions"
                    :key="index"
                    :label="item.interval"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="所属系统:" prop="source">
                <el-select
                  v-model="formData.system"
                  placeholder="请选择所属系统"
                  clearable
                  :style="{ width: '100%' }"
                  filterable
                >
                  <el-option
                    v-for="(item, index) in systemOptions"
                    :key="index"
                    :label="item.interval"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="所属地市:" prop="time">
                <el-select
                  v-model="formData.cities"
                  placeholder="请选择所属地市"
                  clearable
                  :style="{ width: '100%' }"
                  filterable
                >
                  <el-option
                    v-for="(item, index) in citiesOptions"
                    :key="index"
                    :label="item.interval"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button class="query" icon="el-icon-search" type="primary">查询</el-button>
            </el-col>
            <div class="bottom-border"></div>
            <el-col class="btn-box" :span="24">
              <el-button type="primary">新建</el-button>
              <el-button type="primary">修改</el-button>
              <el-button type="primary">删除</el-button>
              <el-button type="primary">维保记录</el-button>
              <el-button type="primary">缺陷记录</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="tableed">
        <el-table
        border
          :data="tableData"
          height="100%"
          :row-class-name="tableRowClassName"
          style="width: 100%;height:100%;"
        >
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column type="index" label="序号" width="80"></el-table-column>
          <el-table-column prop="name" label="所属地市" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="address" label="变电站" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="address" label="机器人名称" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="address" label="机器人ID" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="address" label="运行状态" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="address" label="投运时间" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="address" label="退运时间" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="address" label="生产厂家" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="address" label="型号" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="address" label="设备来源" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="address" label="安装位置"></el-table-column>
          <el-table-column prop="address" label="生产日期" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="address" label="出厂编号" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
      </div>
      <div class="paged elPaginationStyle">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[10, 20, 30]"
          :page-size="pages.pageSize"
          layout="total,prev, pager, next,sizes, jumper"
          :total="pages.totalSize"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({ components: {} })
export default class inspectionReportIndex extends Vue {
  //搜索框from表单数据
  formData = {
    cities: 1, //所属地市
    substation: 1, //变电站名称
    sideShot: 1, //测点名称
    system: 1, //所属系统
    refresh: 1,
    strtimeedntime: "",
  };
  citiesOptions = [
    {
      interval: "山东省国网公司",
      id: 1,
    },
  ];
  substationOptions = [
    {
      interval: "110kVxxx地变电站",
      id: 1,
    },
  ];
  sideShotOptions = [
    {
      interval: "xxx测点",
      id: 1,
    },
  ];
  systemOptions = [
    {
      interval: "xxxxxx系统",
      id: 1,
    },
  ];
  refreshOptions = [
    {
      interval: "其它类型",
      id: 1,
    },
  ];
  $refs!: {
    elForm: any;
  };

  //table表格相关事件数据
  tableData = [
    {
      date: "1",
      name: "xxxxxxxxx",
      address: "xxxxxxxxxxx",
    },
  ];
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }

  //分页数据事件相关
  pages = {
    pageSize: 10,
    page: 1,
    totalSize: 120,
  };
  //   分页
  handleSizeChange(val: any) {
    // console.log(`每页 ${val} 条`);
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.$emit("setPageIndex", val);
  }

  mounted() {
    for (let index = 0; index < 20; index++) {
      this.tableData.push({
        date: "1",
        name: "xxxxxxxxx",
        address: "xxxxxxxxxxx",
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.inspection-report-h {
  width: 100%;
  height: 100%;
  padding: 0.24rem;
  .inspection-report-index {
    width: 100%;
    height: 100%;
    &-btn {
      display: flex;
      justify-content: flex-end;
    }
    .fromed {
      height: 1.6rem;
      .inspection-report-return {
        height: 0.4rem;
        display: flex;
        justify-content: space-between;
        > div {
          font-size: 0.18rem;
        }
        .icon {
          width: 0.16rem;
          height: 0.16rem;
          background: url("../../../../assets/img/JointInspection/xjjh_subtitle_icon.png")
            no-repeat center center;
          background-size: 100% 100%;
          display: inline-block;
        }
      }
    }
    .tableed {
      height: calc(100% - 2.2rem);
    }
    .paged {
      height: 0.6rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .iconfont {
    cursor: pointer;
  }
  .btn-box {
    display: flex;
    // justify-content: flex-end;
    align-items: center;
  }
  .query {
    margin-right: 0.4rem;
  }
  .bottom-border {
    width: 100%;
    height: 2px;
    background: linear-gradient(
      90deg,
      rgba(30, 60, 166, 1),
      rgba(255, 255, 255, 1),
      rgba(32, 62, 168, 1)
    );
    margin-top: 0.45rem;
  }
}
</style>
<style lang="scss" scoped>
.table-query {
  width: 1.4rem;
}
</style>
